<template>
	<view>
		<view class="titbox"></view>
		<view class="programbox">
			<view class="ideabox">
				<view class="catebox">搜索</view>
				<view class="inputbox">
					<view style="display: flex;align-items: center;">
						<image src="../../static/ss.png" @click="getlist()"></image>
						<input style="width: 470rpx;color:#FFF;" placeholder="请输入路段/收费站/管理中心"
						:value="keyword" @input="inputChange" placeholder-style="color:#FFF;font-size:30rpx;"/>
					</view>
					<view style="color: #FFF;width: 15%;text-align: center;" @click="getlist()">
						搜索
					</view>
					<!-- <image src="../../static/dingwei.png" @click="ditu()"></image> -->
				</view>
				<view class="addressbox" v-if="address.address">定位：{{address.address}}</view>
				<view class="addressbox" style="font-size: 16px;">备注：请您选择评价的单位，感谢您为江西高速建言献策！</view>
				<!-- <view class="railwaybox">
					<view class="listbox">
						<view class="itembox" v-for="(item,index) in list" :key="item.id" @click="handletip(item)"
						:style="{'color':item.id==curroneindex?'#FFF':'','background': item.id==curroneindex?'linear-gradient(90deg, #3283C5, #67A7EE)':''}">
							{{item.nickname}}
						</view>
					</view>
					<view class="openbox" @click="openall()">
						<view>全部</view>
						<view class="triangle" v-if="allindex"></view>
						<view class="acttriangle" v-else></view>
					</view>
				</view> -->
				<view class="railwaylist" >
					<!-- <view class="namebox">
						<view v-if="admin_name">{{admin_name}}</view>
						<view style="display: flex;align-items: center;">
							<view style="font-size: 26rpx;color: #555555;">点击选择</view>
							<image src="../../static/info.png"></image>
						</view>
					</view> -->
					<view class="titlebox"  v-if="newlist.length>0">管理中心</view>
					<view class="listbox" v-for="(sitem,sindex) in newlist" :key="sitem.admin_id" @click="handlenew(sindex,sitem)">
						<view  class="slist" 
						:style="{'background': sindex==newindex?'linear-gradient(90deg, #3283C5, #67A7EE)':'','color': sindex==newindex?'#FFF':'',}">
							<view class="sitem">
								<view>{{sitem.nickname}}</view>
								<view class="sinfo">
									<!-- <view>展开</view> -->
									<!-- <view :style="{'color': sindex==Satindex?'#FFF':''}">{{sitem.distance}}</view> -->
									<!-- <image  @click="changeopenindex(1)" v-if="sindex!==Satindex" src="../../static/right.png"></image>
									<image  @click="changeopenindex(1)" v-else src="../../static/right2.png"></image> -->
								</view>
							</view>
						</view>
						<!-- <view class="proadbox" v-if="sindex==Satindex&&openindex" v-for="(pitem,pindex) in sitem.p_road" :key="pindex"
						@click.stop="hangleroad(pindex,pitem)" :style="{'background': pindex==roadindex?'#77b7ff':'','color': pindex==roadindex?'#FFF':'',}">
							<view class="proaditem">{{pitem.name}}</view>
						</view> -->
					</view>
					
					<view class="titlebox"  v-if="Satisfactionlist.length>0">管理中心</view>
					<view class="listbox" v-for="(sitem,sindex) in Satisfactionlist" :key="sitem.admin_id" @click="handlesat(sindex,sitem)">
						<view  class="slist"  @click="changeopenindex(1)"
						:style="{'background': sindex==Satindex?'linear-gradient(90deg, #3283C5, #67A7EE)':'','color': sindex==Satindex?'#FFF':'',}">
							<view class="sitem">
								<view>{{sitem.name}}</view>
								<view class="sinfo">
									<!-- <view>展开</view> -->
									<!-- <view :style="{'color': sindex==Satindex?'#FFF':''}">{{sitem.distance}}</view> -->
									<image  @click="changeopenindex(1)" v-if="sindex!==Satindex" src="../../static/right.png"></image>
									<image  @click="changeopenindex(1)" v-else src="../../static/right2.png"></image>
								</view>
							</view>
						</view>
						<view class="proadbox" v-if="sindex==Satindex&&openindex" v-for="(pitem,pindex) in sitem.p_road" :key="pindex"
						@click.stop="hangleroad(pindex,pitem)" :style="{'background': pindex==roadindex?'#77b7ff':'','color': pindex==roadindex?'#FFF':'',}">
							<view class="proaditem">{{pitem.name}}</view>
						</view>
					</view>
					<view class="titlebox" v-if="roadlist.length>0">路段</view>
					<view class="listbox" v-for="(ritem,rindex) in roadlist" :key="ritem.road_id" @click="handleroad(rindex,ritem)">
						<view  class="slist" @click="changeopenindex(2)"
						:style="{'background': rindex==ratindex?'linear-gradient(90deg, #3283C5, #67A7EE)':'','color': rindex==ratindex?'#FFF':'',}">
							<view class="sitem">
								<view >{{ritem.name}}</view>
								<view class="sinfo">
									<view v-if="ritem.distance">{{ritem.distance}}</view>
									<!-- <view :style="{'color': sindex==Satindex?'#FFF':''}">{{sitem.distance}}</view> -->
									<image v-if="rindex!==ratindex" src="../../static/right.png"></image>
									<image v-else src="../../static/right2.png"></image>
								</view>
							</view>
						</view>
						<view class="proadbox" v-if="rindex==ratindex&&openindex" v-for="(pitem,pindex) in ritem.p_road" :key="pindex"
						@click.stop="hangleroad(pindex,pitem)" :style="{'background': pindex==roadindex?'#77b7ff':'','color': pindex==roadindex?'#FFF':'',}">
							<view class="proaditem">{{pitem.name}}</view>
						</view>
					</view>
					<view class="titlebox" v-if="p_roadlist.length>0">收费站</view>
					<view class="listbox" v-for="(ritem,rindex) in p_roadlist" :key="ritem.id" @click="handleproad(rindex,ritem)">
						<view  class="slist"
						:style="{'background': rindex==patindex?'linear-gradient(90deg, #3283C5, #67A7EE)':'','color': rindex==patindex?'#FFF':'',}">
							<view class="sitem">
								<view>{{ritem.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view style="height:160rpx;"></view> -->
			<view class="bottombox">
				<image src="../../static/bottom2.png"></image>
			</view>
			
			<!-- <view class="butbox" @click="nexttip()">
				提交抽奖
			</view> -->
			<view style="height: 30rpx;"></view>
			<view class="jiange"></view>
		</view>
		<view class="mapbox" v-show="mapbox">
			<view class="mapinfo">
				<view class="mapimg">
					<image src="../../static/way.png"></image>
				</view>
				<!-- :markers="covers" -->
				<map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
				<view class="contentbox">
					<view v-html="content"></view>
				</view>
				<view class="mapbut" @click="mapbox = false">
					知道了
				</view>
			</view>
		</view>
		<!-- 背景图 -->
		<view class="bgbox"></view>
		<view style="height:160rpx;"></view>
		<view class="bottombut">
			<view class="butbox" @click="nexttip()">
				提交抽奖
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				curroneindex:null,
				imglist:[],
				Satisfactionlist:[],
				Satindex:null,//满意度
				addressinfotwo:{},
				location:'',
				mapbox:false,
				latitude: '',
				longitude: '',
				content:'',
				admin_name:'',
				road_id:'',//路段id
				allindex:false,//不显示全部
				keyword:'',
				admin_id:uni.getStorageSync('admin_id'),
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				// latitude: 39.909,
				// longitude: 116.39742,
				covers: [],
				fd:false,
				imgs:'',
				img:[],
				prize_num:'',//抽奖次数
				road_number:'',
				p_road_id:'',
				roadindex:null,
				openindex:false,
				roadlist:[],
				ratindex:null,
				p_roadlist:[],
				patindex:null,
				address:{},
				newlist:[],
				newindex:null,
			}
		},
		onLoad(option) {
			this.info = option
			this.imgs = option.img
			this.img = this.imgs.split(',')
			this.ditu()
			// this.getadminlist()
			// this.selectway()
			console.log(uni.getStorageSync('token'),option,this.img,this.imgs)
			this.getmyinfo()
			// this.getaddress()
		},
		// watch:{
		// 	allindex(){
		// 		if(!this.allindex){
		// 			console.log(12,this.allindex)
		// 			this.list = this.list.slice(0,5)
		// 		}
		// 	}
		// },
		methods: {
			inputChange(e){
				this.keyword = e.target.value
			},
			async ditu(){
			const addressinfo = await this.$wxSdk.wxGetLocation()
				this.addressinfotwo = addressinfo
				console.log(addressinfo,'addressinfo',this.addressinfotwo)
				setTimeout(()=>{
					this.getadminlist()
					this.selectway()
					// this.location = this.addressinfotwo.longitude+","+this.addressinfotwo.latitude
					this.getaddress()
				},1000)
				
			},
			getaddress(){
				this.$http({
					url:'api/Answer/getaddress',
					data:{
						long:this.addressinfotwo.longitude||115.84569549560547,
						lat:this.addressinfotwo.latitude||28.699331283569336
					}
				}).then(res=>{
					this.address = res.data
				})
			},
			//获取用户信息
			getmyinfo(){
				// uni.clearStorage()
				this.$http({
					url:'api/Answer/user_info',
					data:{
						// token:'oU_Rv6fd_0l57FT9g5WnvyNOmjKo'
						token:uni.getStorageSync('token')
					}
				}).then(res=>{
					this.prize_num = res.data.prize_num
				})
			},
			//地图详情
			openmap(sitem){
				this.latitude = sitem.latitude
				this.longitude = sitem.longitude
				this.covers=[
					{
						latitude: this.latitude,
						longitude: this.longitude,
						iconPath: '../../static/marker.png'
					}
				]
				this.content = this.$replace_Rich_text(sitem.content)
				this.mapbox = true
			},
			//获取管理中心列表
			getlist(){
				this.newlist =[]
				this.ratindex = null
				this.roadindex = null
				this.Satindex = null
				this.road_number = ""
				this.$http({
					url:'api/Answer/search_list',
					data:{
						token:uni.getStorageSync('token'),
						admin_id:uni.getStorageSync('admin_id'),
						keyword:this.keyword,
						long:this.addressinfotwo.longitude||115.84569549560547,
						lat:this.addressinfotwo.latitude||28.699331283569336,
					}
				}).then(res=>{
					this.Satisfactionlist = res.data.admin
					this.roadlist = res.data.road
					this.p_roadlist = res.data.p_road
					this.getaddress()
					// const s = this.list.filter(item=>item.id==uni.getStorageSync('admin_id'))
					// this.curroneindex = s[0].id||uni.getStorageSync('admin_id')split
					// this.selectway()
				})
			},
			getadminlist(){
				this.$http({
					url:'api/Answer/admin_list',
				}).then(res=>{
					this.newlist = res.data
				})
			},
			handlenew(index,item){
				this.newindex = index
				uni.setStorageSync('admin_id',item.id)
				this.selectway()
			},
			
			//根据用户定位经纬度查询最近站点data
			selectway(){
				this.$http({
					url:'api/Answer/road_list',
					data:{
						admin_id:this.curroneindex||uni.getStorageSync('admin_id'),
						token:uni.getStorageSync('token'),
						long:this.addressinfotwo.longitude||115.84569549560547,
						lat:this.addressinfotwo.latitude||28.699331283569336,
					}
				}).then(res=>{
					this.admin_name = res.data.admin_name
					this.roadlist = res.data.list
				})
			},
			//选择意见类型
			handletip(item){
				this.curroneindex = item.id
				uni.setStorageSync('admin_id',this.curroneindex)
				this.selectway()
			},
			//路段选择
			handlesat(sindex,sitem){
				this.Satindex = sindex
				this.keyword = sitem.name
				// this.roadindex = null
				// this.admin_id = sitem.admin_id
			},
			handleroad(rindex,ritem){
				this.ratindex = rindex
				this.keyword = ritem.name
				this.road_number = ritem.name
				// this.roadindex = null
			},
			handleproad(rindex,ritem){
				this.Satindex = null
				this.ratindex = null
				this.roadindex = null
				this.patindex = rindex
				this.road_id = ritem.road_id||''
				this.p_road_id = ritem.id||''
				this.road_number = ritem.road_number
				this.keyword = ritem.name
				uni.setStorageSync('admin_id',ritem.admin_id)
				console.log(uni.getStorageSync('admin_id'),'admin_id')
			},
			changeopenindex(n){
				if(n==1){
					this.ratindex = null
					// this.roadindex = null
				}else{
					this.Satindex = null
				}
				this.roadindex = null
				this.openindex = !this.openindex
			},
			nexttip(){
				console.log(this.road_number,'road_number',this.keyword)
				if(!this.p_road_id){
					uni.showToast({
						title:'请选择路段/收费站',
						icon:'none'
					})
					return
				}
				if(this.fd){
					return
				}
				this.fd = true
				this.$http({
					url:'api/Answer/post_answer',
					data:{
						token:uni.getStorageSync('token'),
						answer:uni.getStorageSync('answer'),
						type:this.info.type,//类型1满意2一般3不满意
						content:this.info.content,
						admin_id:uni.getStorageSync('admin_id'),
						img:this.img,
						department_id:this.info.department_id,
						road_id:this.road_id||'',
						p_road_id:this.p_road_id||'',
						road_number:this.road_number||this.keyword
					}
				}).then(res=>{
					this.fd = true
					uni.showToast({
						title:res.msg,
						icon:'none',
						duration:3000
					})
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/luck_draw/luck_draw'
						})
					},500)
				})
			},
			//是否全部展示
			openall(){
				this.allindex = !this.allindex
				if(this.allindex){
					this.list = this.list.slice(0,5)
				}else{
					this.getlist()
				}
			},
			hangleroad(pindex,pitem){
				this.patindex = null
				this.roadindex = pindex
				this.road_id = pitem.road_id||''
				this.p_road_id = pitem.id||''
				this.road_number = pitem.road_number
				this.keyword = pitem.name
				console.log(this.keyword,'vvvvvvvvvvvvvvvvvvvvv',this.road_number)
				console.log(pitem,'pitem',this.keyword)
				uni.setStorageSync('admin_id',pitem.admin_id)
				console.log(uni.getStorageSync('admin_id'),'admin_id')
			}
		}
	}
</script>

<style>
	page{
		background: linear-gradient(-89deg, #008fd6, #3ba3ed);
	}
</style>
<style lang="scss" scoped>
	.bgbox{
		width: 100%;
		background: url(http://wjdc.zxkjnc.com/images/hllhp1.png) no-repeat;
		height: 795rpx;
		background-size: 100% 797rpx;
	}
	// .butbox{
	// 	left: 50%;
	// 	transform: translate(-50%,0);
	// 	position: absolute;
	// 	width: 669rpx;
	// 	height: 89rpx;
	// 	text-align: center;
	// 	line-height: 89rpx;
	// 	margin: 90rpx 0 30rpx 0;
	// }
	.titbox{
		// width: 98%;
		top: 30rpx;
		left: 50%;
		transform: translate(-50%,0);
		width: 740rpx;
		height: 22rpx;
		background: linear-gradient(92deg, #6EA7FB, #7CBDF7);
		border-radius: 10rpx;
		position: absolute;
	}
	.programbox{
		width: 720rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 49rpx 0rpx rgba(59,137,204,0.68);
		min-height: 200rpx;
		left: 50%;
		top: 52rpx;
		transform: translate(-50%,0);
		position: absolute;
		margin-bottom: 220rpx;
		
		.ideabox{
			width: 92%;
			margin: 0 auto;
			.catebox{
				height: 90rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #222222;
			}
			.inputbox{
				height: 90rpx;
				background: linear-gradient(90deg, #3283C5, #67A7EE);
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				image{
					width: 31rpx;
					height: 32rpx;
					margin: 0 20rpx;
				}
			}
			.addressbox{
				 font-size: 26rpx;
				 color: #555555;
			}
			.railwaybox{
				display: flex;
				margin-top: 20rpx;
				.listbox{
					width: 100%;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.itembox{
						width: fit-content;
						height: 72rpx;
						background: #E1F0FF;
						border-radius: 10rpx;
						padding: 0 20rpx;
						margin-bottom: 20rpx;
						line-height: 72rpx;
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #222222;
						margin-right: 20rpx;
					}
				}
				.openbox{
					width: 20%;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #444444;
					display: flex;
					align-items: center;
					.acttriangle{
						width: 0;
						height: 0;
						border-right: 12rpx solid transparent;
						border-left: 12rpx solid transparent;
						border-top: 12rpx solid #3E84CB;
						margin: 0 10rpx;
					}
					.triangle{
						width: 0;
						height: 0;
						border-top: 12rpx solid transparent;
						border-bottom: 12rpx solid transparent;
						border-right: 12rpx solid #3E84CB;
						margin: 0 10rpx;
					}
				}
			}
			.railwaylist{
				padding-bottom: 20rpx;
				.namebox{
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 87rpx;
					image{
						width: 30rpx;
						height: 35rpx;
						margin-left: 10rpx;
					}
				}
				.titlebox{
					margin: 10rpx 0;
					font-size: 26rpx;
				}
				.listbox{
					.slist{
						background: linear-gradient(-90deg, #FFFFFF, #CAE4FF);
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #222222;
						width: 100%;
						.sitem{
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 80rpx;
							width: 90%;
							margin: 5rpx auto;
							.sinfo{
								display: flex;
								align-items: center;
								font-size: 30rpx;
								font-weight: 400;
								color: #555555;
								image{
									width: 11rpx;
									height: 20rpx;
									margin-left: 20rpx;
								}
							}
							
						}
					}
					.proadbox{
						background: #ecf5ff;
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #222222;
						width: 100%;
						.proaditem{
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 80rpx;
							width: 90%;
							margin: 5rpx auto;
						}
					}
				}
			}
		}
	}
	.bottombut{
		width:100%;
		height: 150rpx;
		position: fixed;
		bottom: 0;
		background: linear-gradient(-89deg, #008fd6, #3ba3ed);
		z-index: 99;
		.butbox{
			width: 669rpx;
			height: 89rpx;
			text-align: center;
			line-height: 89rpx;
			margin:20rpx auto;
			// margin: 90rpx 0 30rpx 0;
			background: url(http://wjdc.zxkjnc.com/images/but.png) no-repeat;
			background-size: 669rpx 89rpx;
			font-size: 38rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	
	.mapbox{
		display: flex;
		width: 750rpx;
		height: 100vh;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		.mapinfo{
			width: 100%;
			min-height: 600rpx;
			border-radius: 20rpx;
			background-color: #FFF;
			position: fixed;
			// padding-bottom: 50rpx;
			// position: relative;
			background-image: url(http://wjdc.zxkjnc.com/images/hllhp4.png);
			background-size: 100% 100%;
			bottom: 0;
			.mapimg{
				margin: 20rpx auto;
				text-align: center;
				image{
					width: 242rpx;
					height: 100rpx;
				}
			}
			.map{
				width: 680rpx;
				height: 338rpx;
				margin: 0 auto;
			}
			.contentbox{
				width: 680rpx;
				// height: 338rpx;
				margin: 20rpx auto;
			}
			.mapbut{
				background-image: url(http://wjdc.zxkjnc.com/images/but.png);
				width: 669rpx;
				height: 89rpx;
				background-size: 669rpx 89rpx;
				margin: 20rpx auto;
				font-size: 38rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 89rpx;
			}
		}
	}
	.bottombox{
		left: 50%;
		transform: translate(-50%,0);
		position: absolute;
		// width: 669rpx;
		// height: 89rpx;
		// text-align: center;
		// line-height: 89rpx;
		// margin: 90rpx 0 30rpx 0;
		width: 720rpx;
		height: 39rpx;
		margin-top: 19rpx;
		image{
			width: 720rpx;
			height: 39rpx;
		}
	}
	.jiange{
		width: 100%;
		height: 220rpx;
		position: absolute;
	}
</style>
